<template>
    <div class="demo-date-picker">
        <div class="block" :style="{ '--mywidth': width, '--myheight': height }">
            <el-date-picker v-if="type == 1" @change=pickerchange v-model="value" type="date" size="large" />
            <el-date-picker v-else-if="type == 2" @change=pickerchange v-model="value" type="datetime" size="large" />
            <!-- <el-time-picker  type="datetime" size="large" /> -->
            <el-time-picker v-else @blur=pickerchange v-model="value" type="date" size="large" />

        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
    width: {
        type: String,
        default: '1.5rem'
    },
    height: {
        type: String,
        default: '0.38rem'
    },
    type: {
        type: String,
        default: '1'
    },
})
const emit = defineEmits(['childEvent'])
const value = ref('')
const pickerchange = (val) => {
    const formattedTime = convertToLocalTime(val);
    emit('childEvent', value);
}
function convertToLocalTime(inputTimeStr) {
    const inputTime = new Date(inputTimeStr);
    const utcTime = inputTime.getTime() + (inputTime.getTimezoneOffset() * 60000);
    const localTime = new Date(utcTime + (3600000 * 8)); // 加8小时的时差
    return localTime.toLocaleString();
}
</script>

<style lang="less" scoped>
.block :deep(.el-tooltip__trigger) {
    width: var(--mywidth) !important;

    height: var(--myheight) !important;

}

.input-box {
    /* position: absolute; */
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo-date-picker {
    position: relative;
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    /* opacity: 0; */
    /*padding: 30px 0;*/
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>